<script setup>
import { computed, onMounted, ref } from "vue";
import { queryGenderCountApi } from "@/api/report";

const genderList = ref([]);

const optionGenderData = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        degree: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: genderList.value, // 使用从后端获取的数据
      },
    ],
  };
});
const queryGenderCountData = async () => {
  try {
    const res = await queryGenderCountApi();
    if (res.code === 200) {
      genderList.value = res.data;
      console.log(genderList.value);
    } else {
      ElMessage.error("获取员工性别统计数据失败：" + res.msg);
    }
  } catch (error) {
    ElMessage.error("获取员工性别统计数据时发生错误：" + error.message);
  }
};

onMounted(() => {
  queryGenderCountData();
});
</script>

<template>
  <div class="gender-stat">
    <h3>员工性别统计</h3>
    <e-charts class="employeeGenderData" :option="optionGenderData" />
  </div>
</template>

<style scoped>
.gender-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
}
h3 {
  margin-bottom: 10px;
}
.employeeGenderData {
  height: 400px;
}
</style>
